<template>
  <div class="bg-white w-full">
    <Table
      size="large"
      :scroll="scroll"
      :columns="tableColumns"
      :data-source="dataSource"
      :pagination="pagination"
      :loading="loading"
      @change="handleTableChange"
      bordered
      sticky
    >
      <template #action="{ record }">
        <span class="flex justify-center">
          <div v-if="record.status === 'fail'">
            <a class="font-bold" style="color: rgb(165, 165, 165)" disabled> <EyeInvisibleOutlined />查看详情</a>
          </div>
          <div v-else-if="record.status !== 'fail'">
            <a class="font-bold" style="color: rgba(4, 189, 72, 0.46)" @click="handleView(record)">
              <EyeOutlined />查看详情</a
            >
          </div>
        </span>
      </template>
    </Table>
  </div>
  <AppDetailDrawer ref="drawerRef"></AppDetailDrawer>
</template>

<script lang="ts" setup>
import { computed, onMounted, ref } from 'vue';
import { Table } from 'ant-design-vue';
import { EyeOutlined, EyeInvisibleOutlined } from '@ant-design/icons-vue';
import { getTenantSubscribedAppList } from '/@/api/maintenance-center/resource-monitor/for-tenant/resourceMonitor';
import AppDetailDrawer from '/@/views/maintenance-center/resource-monitor/for-tenant/components/appDetailDrawer.vue';
import { TableProps } from 'ant-design-vue/lib/vc-table/Table';

const tableColumns = [
  {
    title: '应用id',
    dataIndex: 'appId',
  },
  {
    title: '应用名称',
    dataIndex: 'appName',
  },
  {
    title: '应用架构',
    dataIndex: 'architecture',
  },
  {
    title: '组件数',
    dataIndex: 'componentCount',
  },
  {
    title: '应用类型',
    dataIndex: 'appType',
  },
  {
    title: '应用策略数',
    dataIndex: 'strategyCount',
  },
  {
    title: '套餐生效时间',
    dataIndex: 'effectiveTime',
  },
  {
    title: '套餐过期时间',
    dataIndex: 'expireTime',
  },
  {
    title: '套餐类型',
    dataIndex: 'type',
  },
  {
    title: 'RDS实例名称',
    dataIndex: 'instanceName',
  },
  {
    title: 'RDS实例ID',
    dataIndex: 'instanceId',
  },
  {
    title: 'IP',
    dataIndex: 'dbIp',
  },
  {
    title: '数据库名',
    dataIndex: 'dbName',
  },
  {
    title: '状态',
    dataIndex: 'status',
  },
  {
    title: '数据源类型',
    dataIndex: 'dbType',
  },
  {
    title: '操作',
    dataIndex: 'action',
    slots: {
      customRender: 'action',
    },
  },
];

const props = defineProps({
  tenantCode: String,
});
const scroll = ref<undefined | object>(undefined);
const loading = ref(true);
const dataSource = ref([]);
let current = ref(1);
let size = ref('10');
const total = ref('0');

const drawerRef = ref(null);
const pagination = computed(() => ({
  showSizeChanger: true,
  total: total.value,
  current: current.value,
  size: size.value,
  showTotal: (total) => {
    return `共 ${total} 条`;
  },
}));

onMounted(() => {
  try {
    getTenantSubscribedAppList({ tenantCode: props.tenantCode }).then((res) => {
      dataSource.value = res;
      total.value = res.length;
    });
  } finally {
    loading.value = false;
  }
});
const handleTableChange: TableProps['onChange'] = (pag) => {
  pagination.value.current = pag.current;
  pagination.value.size = pag.pageSize;
  if (Number(pagination.value.size) > 10) {
    scroll.value = { x: 'max-content', y: 500 };
  }
  getTenantSubscribedAppList({
    tenantCode: props.tenantCode,
    current: pagination.value.current,
    size: pagination.value.size,
  }).then((res) => {
    dataSource.value = res;
    total.value = res.length;
    current.value = pag.current;
    size.value = pag.pageSize;
  });
};

function handleView(record: Recordable) {
  drawerRef.value.showDrawer(record.appId, props.tenantCode);
}
</script>

<style lang="less" scoped>
/* 表格斑马样式 **/
/deep/ .ant-table-tbody tr:nth-child(2n) {
  background-color: #fafafa;
}
</style>
